<template>
	<view>
		<u-navbar title="关注列表" :autoBack="true" :placeholder="true">
		</u-navbar>
		<view class="main">
			<view class="focusList" v-if="Focus.length>0">
				<view v-for="item,index in Focus" class="item">
					<view class="leftBox" @click="goOther">						
						<u--image height="3rem" width="3rem" shape="circle" :src="item.avatar"></u--image>
					    <span>{{item.nickName}}</span>
						<u-icon class="icon" v-if="item.sex == '女生'" name="woman" color="#ff579e" size="1.2rem">
						</u-icon>
						<u-icon class="icon" v-if="item.sex == '男生'" name="man" color="#3785fd" size="1.2rem">
						</u-icon>
					</view>
					<!-- <view class="rightBox">
						<u-button v-if="item.isFocus" @click="press(index)" type="primary" color="#ccc" text="已关注" shape="circle"></u-button>
						<u-button v-else @click="press(index)" type="primary" text="关注" shape="circle"></u-button>
					
					</view> -->
					
				</view>
				
			</view>
			<u-empty v-else mode="list" text="暂无关注" marginTop="50%">
			</u-empty>
		</view>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	export default{
		data()
		{
				
			return{
			}
		},
		computed:{
			...mapGetters(['Focus']),
		},
		methods:{
		
		press(index)
		{
			
			this.focusUser[index].isFocus=!this.focusUser[index].isFocus
		},
		goOther(){
			// console.log(this.$store.state.focuslist.focusId)
			console.log(this.Focus[0].focusId)
			this.$store.dispatch('getOtherInfo',this.Focus[0].focusId)
			this.$store.dispatch('getOtherInfoBook',this.Focus[0].focusId)
			this.$Router.push({
			    name: 'other'
			})
		},
		}
	}
</script>

<style lang="scss" scoped>
	.focusList{
		margin:1rem 1rem 0rem 1rem;
		
			.item{
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #ccc;
				padding-bottom: 0.5rem;
				margin-bottom: 1rem;
				.leftBox{
			
					display: flex;//flex开关，要用就得写
					flex-direction: row;
					justify-content: center;
					align-items: center;
					span{
						display: inline-block;//行内样式开关
						margin:0.2rem 0.5rem;
					}
			}
			.rightBox{
				display: flex;
				justify-content: flex-end;
				align-items: center;
			.btu{
				color:blue;
				
			}
			}
		}
		
		
	}
</style>
